<script>
  import dayjs from 'dayjs';
  import { calendar } from '@/sheep/components/s-better-calendar/calendar';
  import UniCol from '@/uni_modules/uni-row/components/uni-col/uni-col.vue';
  import sheep from '@/sheep';
  import MpHtml from '@/pages/nc_chat/components/ua2-markdown/mp-html/mp-html.vue';

  export default {
    name: 'pcHistoryToday',
    components: { MpHtml, UniCol },
    data() {
      return {
        realTimeTime: '',
        // 今天的信息
        todayInfo: {},
        // 历史今天
        historyTodayList: [],
        // 选中的年份
        todayIndex: 0,
        // 历史今天信息
        historyTodayInfo: {},
      };
    },
    watch: {
      todayIndex: {
        async handler(newValue, oldValue) {
          await this.getHistoryDetail(newValue);
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      this.getRealTimeTime();
      this.getHistoryToday();
      this.todayInfo = calendar.solar2lunar(dayjs(new Date().getTime()).format('YYYY'), dayjs(new Date().getTime()).format('MM'), dayjs(new Date().getTime()).format('DD'));
    },
    methods: {
      // 历史今天时间
      getRealTimeTime() {
        setInterval(() => {
          this.realTimeTime = dayjs(new Date().getTime()).format('YYYY年MM月DD日 HH:mm:ss');
        }, 100);
      },
      // 获取历史今天
      async getHistoryToday() {
        let { data } = await sheep.$api.surname.getHistoryToday();
        this.historyTodayList = data;
        await this.getHistoryDetail(0);
      },
      // 获取历史今天详情
      async selectTodayIndex(index) {
        this.todayIndex = index;
      },
      // 获取历史今天详情
      async getHistoryDetail(index) {
        const { data } = await sheep.$api.surname.getHistoryDetail({
          id: this.historyTodayList[index].id,
        });
        this.historyTodayInfo = data;
      },
    },
  };
</script>

<template>
  <view class="flex-sub flex flex-column bg_FFFFFF"
        style="border-radius: 16rpx;overflow: hidden;font-family: Source Han Sans CN, Source Han Sans CN;">
    <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
          class="flex align-center justify-between">
      <view class="flex align-end" style="margin-left: 20px;">
        <view class="flex align-center">
          <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
          <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
            历史今天
          </view>
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ realTimeTime }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ todayInfo.gzYear }}年{{ todayInfo.IMonthCn }}{{ todayInfo.IDayCn }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ todayInfo.ncWeek }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          第{{ todayInfo.whichWeek }}周
        </view>
      </view>
    </view>
    <view class="flex-sub flex align-center">
      <view class="ml_20 flex-sub"
            style="background: #F6F7FB;border: 2rpx solid #DBDBDB;border-radius: 16rpx 16rpx 16rpx 16rpx;height: 98%;position: relative;overflow: hidden"
      >
        <scroll-view scroll-y="true" class="surnameList">
          <view class="ml_20 mr_20 mt_20"
                style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 20rpx;"
          >
            <view v-for="(item,index) in historyTodayList"
                  :key="index"
                  @click.stop="selectTodayIndex(index)"
                  style="border-radius: 8px;padding: 32rpx 0;cursor:pointer;width: 100%;overflow: hidden"
                  :style="{
                            background: index == todayIndex ? '#FAE6BC' : '#FFFFFF',
                  }"
                  class="flex flex-column flex-sub"
            >
              <view style="font-size: 48rpx;color: #363636;"
                    class="fw_500 ml_20"
              >
                {{ item.year }}年
              </view>
              <view class="fw_400 ml_20 mr_20"
                    style="font-size: 30rpx;color: #363636;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"
              >
                {{ item.content }}
              </view>
            </view>
          </view>
          <view style="height: 20px;"></view>
        </scroll-view>
      </view>
      <view class="ml_20 mr_20 flex flex-column"
            style="background: #FFFFFF;border: 2rpx solid #DBDBDB;border-radius: 16rpx 16rpx 16rpx 16rpx;height: 98%;flex: 2;position: relative;overflow: hidden"
      >
        <view class="flex flex-column" style="background: #FAE6BC;padding: 10rpx 0">
          <view style="font-size: 48rpx;color: #363636;" class="fw_500 ml_40">
            {{ historyTodayInfo.year }}年
          </view>
          <view style="color: #363636;font-size: 32rpx;" class="fw_400 ml_40">
            {{ historyTodayInfo.year }}年{{ historyTodayInfo.month }}月{{ historyTodayInfo.day }}日
          </view>
        </view>
        <view class="flex-sub" style="position: relative">
          <scroll-view scroll-y="true" class="surnameList">
            <mp-html :content="historyTodayInfo.content"
                     style="font-size: 40rpx;color: #363636;line-height: 30px;white-space: pre-wrap;padding: 20rpx 0"
                     class="ml_40 mr_40"
            ></mp-html>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .surnameList {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>